"use client";

import { Message } from '@/lib/api/message';
import { formatBeijingCompact } from '@/lib/utils';
import { VoicePlayer } from './VoicePlayer';
import { useVoice } from '@/lib/contexts/VoiceContext';

interface MessageItemProps {
  message: Message;
}

export function MessageItem({ message }: MessageItemProps) {
  const isUser = message.role === 'USER';
  const { selectedVoice } = useVoice();
  
  return (
    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-4 px-3 sm:px-4`}>
      <div className={`max-w-[85%] sm:max-w-[75%] lg:max-w-[65%] ${isUser ? 'order-2' : 'order-1'}`}>
        <div className={`rounded-2xl px-4 py-3 shadow-sm ${
          isUser 
            ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white' 
            : 'theme-bg-secondary border theme-border theme-text-primary'
        }`}>
          <div className="flex flex-wrap items-baseline gap-1.5">
            <span className="text-sm leading-relaxed whitespace-pre-wrap break-words">{message.content}</span>
            {message.content.trim() && (
              <div className="flex items-center gap-1 flex-shrink-0">
                <VoicePlayer 
                  text={message.content}
                  voice={selectedVoice}
                  className="hover:scale-105 transition-transform"
                />
              </div>
            )}
          </div>
        </div>
        <div className={`text-xs text-gray-400 mt-1.5 px-1 ${isUser ? 'text-right' : 'text-left'}`}>
          {formatBeijingCompact(message.createdAt)}
        </div>
      </div>
    </div>
  );
}